<template>
    <span class="time">{{ nowTime }}</span>
    <span class="date">
        <span>{{ week }}</span>
        <span>{{ date }}</span>
    </span>
</template>

<script setup lang="ts">
import { ref,onMounted} from 'vue';

// 定义响应式变量
const nowTime = ref('00:00:00');
const week = ref('');
const date = ref('');


// 获取当前时间并实时更新
const updateTime = () => {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    nowTime.value = `${hours}:${minutes}:${seconds}`;

    const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    week.value = days[now.getDay()];

    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    date.value = `${year}年${month}月${day}日`;
};


onMounted(()=>{
    updateTime();
setInterval(updateTime, 1000); // 每秒更新一次时间
})
</script>


<style scoped>
.time {
    font-size: 1.59rem;
    margin-right: 1rem;
}

.date {
    span {
        display: block;

        &:nth-child(1) {
            font-size: 0.8rem;
            text-align: right;
        }

        &:nth-child(2) {
            font-size: 0.8rem;
        }
    }
}
</style>